<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter ref="formPanel" :list="topFilterList" :cols="4" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable
      ref="tables"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="cmcCustomerLossMainPage"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="customerLossQueryExportData">导出</el-button>
      </template>
    </FilterTable>

    <!-- 问卷录入 destroyOnClose-->
    <Drawer :visible.sync="questionnaire" title="流失报警回访信息录入" destroyOnClose width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs :remindData="this.selectColumns[0]" :buttonType="type" @closeDialog="closeQuestionNaire"></RemindInputs>
    </Drawer>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import {
  getBrandSelect,
  getSeriesSelect,
  getModelSelect,
  getTrackerSelect,
  getInputerSelect,
  getCustomerLossResult,
  getCustomerLossQueryExcelList
} from '@/api/customerRepair/customerLoss/resultQuery';
import RemindInputs from '@/pages/customerRepair/customerCare/maintenanceRemind/remindInputs.vue'; // 问卷录入
import { exportExcelFile } from '@/utils/index';

export default {
  // 组件注册
  components: {
    RemindInputs
  },
  mixins: [dictionary],
  // 绑定数据定义
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getCustomerLossResult,
      fetchParams: { xhrAbort: true },
      columns: this.createColumns(),
      detailData: '', // 明细数据
      questionnaire: false,
      selectColumns: [],
      type: null,
      exportLoading: false
    };
  },
  mounted: function() {
    // 初始化品牌下拉框
    this.initBrandSelect();
  },
  // 处理方法
  methods: {
    // 初始化 品牌
    async initBrandSelect() {
      const res = await getBrandSelect();
      this.topFilterList[4].itemList = res.data.map(x => ({ value: x.brandId + '', text: x.brandName }));
    },
    changeBrandSelect(val) {
      // 清空车系 车型
      this.clearFormItem(this.topFilterList[5]);
      this.clearFormItem(this.topFilterList[6]);
      if (!val) return;
      this.getSeriesSelect(val);
    },
    changeSeriesSelect(val) {
      // 清空车型
      this.clearFormItem(this.topFilterList[6]);
      if (!val) return;
      this.getModelSelect(val);
    },
    // 初始化车系
    async getSeriesSelect(brandCode) {
      const res = await getSeriesSelect(brandCode);
      this.topFilterList[5].itemList = res.data.map(x => ({ value: x.seriesId + '', text: x.seriesName }));
    },
    // 初始化车型
    async getModelSelect(seriesCode) {
      // 获取品牌代码
      const brandCode = this.topFilterList[4].initialValue;
      const res = await getModelSelect(brandCode, seriesCode);
      this.topFilterList[6].itemList = res.data.map(x => ({ value: x.modelId + '', text: x.modelName }));
    },
    // 初始化跟踪员
    async initTrancer() {
      const res = await getTrackerSelect();
      this.topFilterList[1].itemList = res.data.map(x => ({ value: x.SERIES_CODE, text: x.SERIES_NAME }));
    },
    // 初始化录入人
    async initInputer() {
      const res = await getInputerSelect();
      this.topFilterList[3].itemList = res.data.map(x => ({ value: x.SERIES_CODE, text: x.SERIES_NAME }));
    },
    // 初始化经销商
    async initDealer() {
      const res = await getDealerSelect();
      this.topFilterList[0].itemList = res.data.map(x => ({ value: x.SERIES_CODE, text: x.SERIES_NAME }));
    },
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    // 问卷录入
    showDetail(val) {
      // console.log(JSON.stringify(this.selectColumns[0]))
      // console.log(this.selectColumns[0].TRACE_TAG,'TRACE_TAG')
      this.selectColumns[0] = val;
      // console.log(this.selectColumns,'selee')
      this.type = 1;
      this.questionnaire = true;
    },
    closeQuestionNaire(val) {
      this.questionnaire = val;
    },

    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        // {
        //   type: 'SELECT',
        //   label: '经销商',
        //   fieldName: 'dealerCode',
        //   itemList: []
        // },
        {
          type: 'SELECT',
          label: '跟踪员',
          fieldName: 'trancer',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '跟踪状态',
          fieldName: 'traceStatus',
          itemList: this.createDictList('8058')
        },
        {
          type: 'SELECT',
          label: '录入人',
          fieldName: 'inputer',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand',
          change: val => {
            this.changeBrandSelect(val);
          },
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'series',
          change: val => {
            this.changeSeriesSelect(val);
          },
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'model',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        { type: 'RANGE_DATE', label: '跟踪日期', fieldName: 'InputBeginDate|InputEndDate', valueFormat: 'yyyy-MM-DD' }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.showDetail(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '品牌',
          dataIndex: 'BRAND',
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'SERIES',
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'MODEL'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN'
        },
        {
          title: '销售日期',
          dataIndex: 'SALES_DATE'
        },
        {
          title: '送修人',
          dataIndex: 'DELIVERER'
        },
        {
          title: '送修人性别',
          dataIndex: 'DELIVERER_GENDER',
          render: props => {
            return <span>{this.createDictText(props.row.DELIVERER_GENDER, '1002')}</span>;
          }
        },
        {
          title: '送修人电话',
          dataIndex: 'DELIVERER_PHONE'
        },
        {
          title: '送修人手机',
          dataIndex: 'DELIVERER_MOBILE'
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO'
        },
        {
          title: '上次维修日期',
          dataIndex: 'LAST_MAINTAIN_DATE'
        },
        {
          title: '车主性质',
          dataIndex: 'OWNER_PROPERTY'
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME'
        },
        {
          title: '性别',
          dataIndex: 'GENDER',
          render: props => {
            return <span>{this.createDictText(props.row.GENDER, '1002')}</span>;
          }
        },
        {
          title: '车主电话',
          dataIndex: 'PHONE'
        },
        {
          title: '车主手机',
          dataIndex: 'MOBILE'
        },

        {
          title: '车主地址',
          dataIndex: 'ADDRESS'
        },
        {
          title: '联系人',
          dataIndex: 'CONTACTOR_NAME'
        },
        {
          title: '联系人手机',
          dataIndex: 'CONTACTOR_MOBILE'
        },
        {
          title: '联系人电话',
          dataIndex: 'CONTACTOR_PHONE'
        },
        {
          title: '跟踪日期',
          dataIndex: 'INPUT_DATE',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '录入人',
          dataIndex: 'INPUTER'
        },
        {
          title: '跟踪人',
          dataIndex: 'TRANCER'
        },
        {
          title: '跟踪状态',
          dataIndex: 'TRACE_STATUS',
          render: props => {
            return <span>{this.createDictText(props.row.TRACE_STATUS, '8058')}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE'
        },
        // {
        //   title: '第一次跟踪日期',
        //   dataIndex: 'INPUT_DATE_F',
        //   dateFormat:'yyyy-MM-dd'
        // },
        // {
        //   title: '第二次跟踪日期',
        //   dataIndex: 'INPUT_DATE_S',
        //   dateFormat:'yyyy-MM-dd'
        // },
        // {
        //   title: '第三次跟踪日期',
        //   dataIndex: 'INPUT_DATE_T',
        //   dateFormat:'yyyy-MM-dd'
        // },
        {
          title: '备注',
          dataIndex: 'REMARK'
        },
        {
          title: '回访失败原因',
          dataIndex: 'DR_CODE',
          render: props => {
            return <span>{this.createDictText(props.row.DR_CODE, '8084')}</span>;
          }
        },
        {
          title: '下次维修提醒',
          dataIndex: 'NEXT_REPAIR_REMIND'
        },
        {
          title: '流失原因',
          dataIndex: 'LOSS_REASON',
          render: props => {
            return <span>{this.createDictText(props.row.LOSS_REASON, '')}</span>;
          }
        }
      ];
    },
    // 查询条件触发方法
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },
    customerLossQueryExportData() {
      this.exportLoading = true;
      getCustomerLossQueryExcelList(this.fetchParams).then(res => {
        exportExcelFile(res, '客户流失回访查询');
        this.exportLoading = false;
      });
    }
  }
};
</script>

<style></style>
